<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'
import { useStore } from 'vuex'
const store = useStore()
const seller_ref = ref(null) //ref
const chartInstance = ref(null) //实例化
const allData = ref(null) //总数据
let startValue = 0
let endValue = 9
let timerId = null
// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )
  const initOption = {
    title: {
      text: '▎ 地区销售排行',
      left: 20,
      top: 20
    },
    grid: {
      top: '40%',
      left: '5%',
      bottom: '5%',
      right: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      show: true
    },
    series: [
      {
        type: 'bar'
      }
    ]
  }
  chartInstance.value.setOption(initOption)
  chartInstance.value.on('mouseover', () => {
    clearInterval(timerId)
  })
  chartInstance.value.on('mouseout', () => {
    startInterval()
  })
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/rank.json').then((res) => {
    allData.value = res.data
    allData.value.sort((a, b) => {
      return b.value - a.value
    })
    //更新数据
    updateChart()
    //启动定时器
    startInterval()
  })
}
//更新图表
const updateChart = () => {
  // 处理图表需要的数据
  const colorArr = [
    ['#0BA82C', '#4FF778'],
    ['#2E72BF', '#23E5E5'],
    ['#5052EE', '#AB6EE5']
  ]
  // 处理图表需要的数据
  const provinceArr = allData.value.map((item) => {
    return item.name
  })
  const valueArr = allData.value.map((item) => {
    return item.value
  })
  const dataOption = {
    dataZoom: {
      show: false,
      startValue: startValue,
      endValue: endValue
    },
    xAxis: {
      data: provinceArr
    },
    series: [
      {
        data: valueArr,
        itemStyle: {
          color: (arg) => {
            let targetColorArr = null
            if (arg.value > 300) {
              targetColorArr = colorArr[0]
            } else if (arg.value > 200) {
              targetColorArr = colorArr[1]
            } else {
              targetColorArr = colorArr[2]
            }
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: targetColorArr[0]
              },
              {
                offset: 1,
                color: targetColorArr[1]
              }
            ])
          }
        }
      }
    ]
  }
  chartInstance.value.setOption(dataOption)
}

// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  let titleFontSize = (seller_ref.value.offsetWidth / 100) * 5
  //分辨率大小相关的配置项
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize
      }
    },
    series: [
      {
        barWidth: titleFontSize,
        itemStyle: {
          borderRadius: [0.5 * titleFontSize, 0.5 * titleFontSize, 0, 0]
        }
      }
    ]
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
//启动停止定时器
const startInterval = () => {
  if (timerId) {
    clearInterval(timerId)
  }
  timerId = setInterval(() => {
    startValue++
    endValue++
    if (endValue > allData.value.length - 1) {
      startValue = 0
      endValue = 9
    }
    updateChart()
  }, 3000)
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  window.onresize = null
  clearInterval(timerId)
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped></style>
